<template #rightExtra>
    <div class="newFileBox">
        <a-modal v-model:open="dialogVisible" title="新建文件夹" @ok="newFolder">
            <div class="wrapper-new">
                <label>文件夹名称：</label>
                <a-input v-model:value="directoryName" placeholder="请输入文件夹名称" style="padding: 6px;" />
            </div>
        </a-modal>
        <a-button type="primary" @click="handleNew" ghost>新建文件夹</a-button>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import request from "@/utils/axios";
import { DownloadOutlined } from "@ant-design/icons-vue";
import { useGlobalStore } from '@/store/global';
import { useFileInfoStore } from '@/store/fileInfo';
import { useRouter, useRoute } from "vue-router";
import { message } from "ant-design-vue";
const useGlobal = useGlobalStore();
const useFileInfo = useFileInfoStore();
const router = useRouter();
const route = useRoute();

const emit = defineEmits(['createFolder']);
// 新建文件夹
const dialogVisible = ref<boolean>(false);
const directoryName = ref<string>('');
const newFolder = () => {
    if (useGlobal.location == 1) {
        request({
            url: "/mediaresourcelib-file-manager/resource/create/folder",
            method: "post",
            data: {
                parent_id: useGlobal.directory_id_move,
                name: directoryName.value,
                location: useGlobal.location
            }
        }).then(res => {
            dialogVisible.value = false;
            if (res.data.status_code === 0) {
                message.error(res.data.msg);
                return;
            }
            message.success('文件夹创建成功');
            directoryName.value = '';
            emit('createFolder', 'folder-success');
        });
    } else {
        request({
            url: "/mediaresource-manage-service/medias/folders",
            method: "post",
            data: {
                id: useGlobal.directory_id_move,
                name: directoryName.value
            }
        }).then(res => {
            dialogVisible.value = false;
            if (res.data.status_code === 0) {
                message.error(res.data.msg);
                return;
            }
            message.success('文件夹创建成功');
            directoryName.value = '';
            emit('createFolder', 'folder-success');
        });
    }
};

const handleNew = () => {
    directoryName.value = '';
    dialogVisible.value = true;
}
</script>
<style lang="scss" scoped>
.wrapper-new{
    padding-top: 26px;
    margin-bottom: 32px;

    >label{
        display: block;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .ant-modal-footer{margin-top: 32px;}
}

.newFileBox {
    .upload-icon {
        position: relative;
        top: 2px;
    }
    .ant-btn {
        width: auto !important;
        height: 30px;
        padding: 0 10px;
        margin-left: 10px;
        &.newBtn {
            background: #f0f0f2 !important;
            border-color: transparent;
            margin-right: 10px;
        }
    }
}
</style>
